<template>
  <div class="vpt-chart"
       ref="baseEchartRef"
       :style="{ ...echartStyle }"></div>
</template>
<script setup>
import { computed, onMounted, watch, ref } from "vue";
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { fontSize } from "@/utils/rem/rem.js";
import { useEchart } from "@/hooks/useEchart.js";

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer,
  PieChart,
]);
const baseEchartRef = ref(null);
const props = defineProps({
  entity: { type: Object, default: () => ({}) },
  width: { type: String, default: "200" },
  height: { type: String, default: "170" },
  // 标题字号
  titleFontSize: { type: Number, default: 24 },
  // 总数字号
  totalFontSize: { type: Number, default: 34 },
  titleTop: { type: String, default: "30%" },
});

const echartStyle = computed(() => {
  const { width, height } = props;
  const reg = /%$/;
  return {
    width: reg.test(width) ? width : `${width}px`,
    height: reg.test(height) ? height : `${height}px`,
  };
});

let baseChart = null;
const chartOption = ref({});
useEchart(getOptions);

const initChart = () => {
  // if (!baseChart) {
  baseChart = echarts.init(baseEchartRef.value);
  baseChart.setOption(chartOption.value, true);
  // }
};

watch(
  () => props.entity,
  () => {
    getOptions();
    initChart();
  },
  { deep: true }
);

onMounted(() => {
  getOptions();
  initChart();
});

function getOptions () {
  chartOption.value = {
    animation: false,
    title: {
      text:
        "{name|" +
        props.entity.name +
        "}\n{val|" +
        props.entity.percentageValue +
        "%}",
      left: "44%",
      top: props.titleTop,
      textAlign: "center",
      textStyle: {
        color: "#fff",
        fontWeight: 400,
        height: fontSize(30),
        fontFamily: "HarmonyOS_SansSC_Medium",
        rich: {
          name: {
            fontSize: fontSize(props.titleFontSize),
            fontFamily: "HarmonyOS_SansSC_Medium",
            fontWeight: "400",
            color: "#ffffffb3",
            padding: [10, 0],
          },
          val: {
            fontSize: fontSize(props.totalFontSize),
            fontFamily: "HarmonyOS_SansSC_Medium",
            padding: [0, 0, 0, 4],
            // fontWeight: 700,
            color: props.entity.centerFontColor,
          },
        },
      },
    },
    tooltip: {
      show: false,
      trigger: "item",
      textStyle: {
        fontFamily: "HarmonyOS_SansSC_Medium",
      },
    },
    legend: {
      selectedMode: false,
      top: "5%",
      left: "center",
      show: false,
      textStyle: {
        fontFamily: "HarmonyOS_SansSC_Medium",
      },
    },
    series: [
      {
        name: props.entity.name,
        center: ["50%", "50%"],
        type: "pie",
        radius: ["70%", "94%"],
        selectedMode: false,
        hoverAnimation: false,
        label: {
          show: false,
          position: "center",
          textStyle: {
            fontFamily: "HarmonyOS_SansSC_Medium",
          },
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: props.entity.percentageValue, name: "percentageValue" },
          { value: props.entity.percentageDrag, name: "percentageDrag" },
        ],
        color: props.entity.percentageColor,
        // color: ['#00B675', '#1e3651']
      },
    ],
  };
}
</script>